
import * as PIXI from 'pixi.js';
import Text from 'components/text';
import Image from 'components/image';
import poster1 from 'common/asset/img/items/poster.png';
import poster2 from 'common/asset/img/items/poster2.png';
import pushSrc from 'common/asset/img/game/push.png';
import injectStore from 'components/injectStore';
const { Container } = PIXI;

@injectStore
export default class GhostModal {
  constructor({parent, store, onGetItem, ...props}) {

    const {height, box, top, width} = props;
    this.onGetItem = onGetItem;
    this.store = store;
    this.parent = parent;
    this.container = new Container();



    let poster = new Image({src: poster1, width: 314, height: 481, top: 50});
    poster.x = (width - poster.width) / 2;

    let dust = new Image({src: poster2, width: 314, height: 481, top: 50});
    dust.x = (width - dust.width) / 2;

    let useText = new Text({value: box.playTexts, top: 560, fontSize: 36, fontWeight: 600});
    useText.x = (width - useText.width) / 2;

    let noticeText = new Text({value: '有重要信息杯泥沙遮住了，试试\n吹散它们。', top: 805, fontSize: 36, fontWeight: 600});
    noticeText.x = (width - noticeText.width) / 2;

    let pushIcon = new Image({src: pushSrc, height: 262, top: 840, isAdapt: true});
    pushIcon.x = (width - pushIcon.width) / 2;

    this.dust = dust;
    this.noticeText = noticeText;
    this.pushIcon = pushIcon;

    this.container.addChild(poster);
    this.container.addChild(dust);
    this.container.addChild(useText);
    this.container.addChild(noticeText);
    this.container.addChild(pushIcon);

    this.container.y = top;
    this.container.x = (window.CFG.view.width - width) / 2;

    pushIcon.interactive = true;
    pushIcon
      .on('pointerdown', () => {
        this.onStart(() => {
          onGetItem();
        });
      })
      .on('pointerup', this.onEnd)
      .on('pointerupoutside', this.onEnd)
      .on('tap', (e) => {
        e.stopped = true;
      });
  }

  onStart = (end) => {
    this.pushEnd = setTimeout(() => {
      // 消失
      this.container.removeChild(this.noticeText);
      this.container.removeChild(this.pushIcon);

      // let noticeText = new Text({value: '', top: 805, fontSize: 36, fontWeight: 600});
      // noticeText.x = (this.container.width - noticeText.width) / 2;

      // 泥沙隐藏
      const dustDisappear = setInterval(() => {
        if (this.dust.alpha <= 0) {
          clearInterval(dustDisappear);
        } else {
          this.dust.alpha -= 0.1;
        }

      }, 100);
      end();
      this.pushEnd = null;
    }, 1500);
  };

  onEnd = () => {
    if (this.pushEnd) clearTimeout(this.pushEnd);

  };
}
